<template>
   <div class="layui-layout layui-layout-admin">
      <div class="layui-header" style="height: 45px;">
         <div class="layui-logo" style="    color: gainsboro;line-height: 45px;font-family: 宋体;font-size: 20px; width: 18%;"><img style="    display: inline-block;width: 50px;height: 50px;margin-top: -3px;" src="/loginImg/logo.png">银行柜面系统</div>
         <ul class="layui-nav layui-layout-left">
         </ul>
         <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-nav-item1">
            <a href="javascript:;">
               <img src="/loginImg/head.png" class="layui-nav-img">
               {{tellerName}}
            </a>
            </li>
            <li class="layui-nav-item layui-nav-item1"><a href="javascript:void(0);" @click="exit()">签退</a></li>
         </ul>
      </div>
 
      <div class="layui-side layui-bg-black" style="top: 45px;">
         <div class="layui-side-scroll" style="    background: gray;">
            <ul class="layui-nav layui-nav-tree layui-bg-cyan layui-inline"  lay-filter="test" >
            <li class="layui-nav-item layui-nav-itemed" v-for="(oneMenu,index1) in oneMenus" style="background: gray;">
               <a  @click="getTwoMenuList(oneMenu.menuId,index1)">{{ oneMenu.menuName }}</a>
               <dl class="layui-nav-child" v-if="oneMenu.menuId===menuParentId"><!--判断一级菜单的menuid是否和二级菜单的父类id一致-->
                  <dd class="dd1" v-for="(twoMenu,index) in twoMenus"><a :class="activeClass == index ? 'a_active':''" @click="changeIframe(twoMenu.menuUrl,index,twoMenu.menuName,oneMenu.menuName)" style="text-indent: 10px;"><i :class="twoMenu.menuIcon"></i>  {{ twoMenu.menuName }}</a></dd>
               </dl>
            </li>
            </ul>
         </div>
      </div>
      
      <div class="layui-body" style="background:white;top: 45px;">
          <div style="width:100%;height:100%;padding: 15px;" v-if="iframesrc!='/bkEmpMain'">
            <div class="container">
               <div class="row clearfix" style="margin-right: 15px;">
                  <div class="col-md-12 column nav_wrap" v-html="nav_text">
                  </div>
               </div>
            </div>
         </div>
         <div v-else="iframesrc=='/bkEmpMain'">
               <div class="container" style="text-align:center;">
                  <div class="row clearfix">
                     <div class="col-md-12 column">
                        <div class="alert alert-success alert-dismissable" style="background:#eee !important;border-color:none;color:black;margin-top:10px;    left: 95px;">
                           欢迎~{{tellerName}}~
                        </div>
                     </div>
                  </div>
               </div>
         </div>
         <iframe class="iframeMain" :src="iframesrc" frameborder="0" scrolling="auto"></iframe>
      </div>
      
      <div class="layui-footer" style="text-align:center;color:gray;background:#ccc;">
         柜员管理界面
      </div>
   </div>
  </template>
  
  <script> 
   import Qs from 'qs'
   export default {
      name: 'BkSysEmpLogin',
      data () {
         return {
            timer: '',
            iframesrc: '/bkEmpMain',
            activeClass: -1, // 0为默认选择第一个，-1为不选择  a标签
            oneMenus:[],
            twoMenus:[],
            menuParentId:'',//用于判断二级菜单是否属于一级菜单
            tellerName:'chenzilong',//柜员名
            nav_text:'',//导航html
         }
      },
      mounted: function (){//页面加载向后台发送数据还有create也是页面一加载就可以进行发送请求的
            this.isLogin();//判断是否登陆
            if(this.$route.path == '/index'){
               this.timer = setInterval(this.getStatus, 1000*120);
            }
      },
      methods: {
         getStatus:function(){//定时向后台发送数据   若redis中没有缓存了  则跳转到登陆页面
            this.$axios
            .post('/bk-menu/getStatus',
                  {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
            )
            .then(result => {
               console.log(result.data);
               if(result.data.code==400){
                  localStorage.removeItem('Authorization');
                  this.$message.warning('当前会话已注销');
                  clearInterval(this.timer);
                  this.$router.push({path: '/'})
               }
               
            })
            .catch(failResponse => {})
         },
         isLogin:function(){
               if(localStorage.getItem('Authorization')==null){
                  this.$message.warning('当前未登录');
                  this.$router.push({path: '/'})
               }else{
                  this.getRoleMenuByRedisToken();//获取相应权限的菜单
                  this.getEmployeeInfo();//获取柜员信息
               }
         },
         getRoleMenuByRedisToken: function () {
            this.$axios
            .get('/bk-menu/getRoleMenuList',
                  {headers:{'Content-Type':'application/x-www-form-urlencoded','Authorization':window.localStorage['Authorization']}}
            )
            .then(result => {
               if(result.data.code==200){
                  this.oneMenus=result.data.data;
               }
               
            })
            .catch(failResponse => {})
         },
         getTwoMenuList: function (menuId,index) {
            var data = Qs.stringify({"parentId":menuId});
            this.$axios
            .post('/bk-menu/getTwoRoleMenuList',
                  data,
                  {headers:{'Content-Type':'application/x-www-form-urlencoded','Authorization':window.localStorage['Authorization']}}
            )
            .then(result => {
               if(result.data.code==200){
                  this.twoMenus=result.data.data;
                  this.menuParentId=this.twoMenus[0].menuParentId;//将从数据库中选出来的二级菜单任一父菜单id赋值给menuParent，用于判断二级菜单是否在一级菜单下
               }else if(result.data.data==null){
                  localStorage.removeItem('Authorization');
                  this.$message.warning('当前会话已注销');
                  this.$router.push({path: '/'})
               }
               
            })
            .catch(failResponse => {})
         },
         exit: function(){//签退
            this.$axios
            .get('/bk-employee/exitout',
                  {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
            )
            .then(result => {
               localStorage.removeItem('Authorization');
               this.$message.success('签退成功');
               clearInterval(this.timer);
               this.$router.push({path: '/'})
            })
            .catch(failResponse => {})
         },
         changeIframe: function (iframesrc,index,menuname,parentMenuname){//点击个工对应的iframe
            this.nav_text='';
            this.nav_text=`<ul class="breadcrumb"><li class="topNav">
                           <a href="/index">`+parentMenuname+`</a>
                        </li><li class="topNav">
                           <a href="javascript:void(0);">`+menuname+`</a>
                        </li></ul>`;
            this.activeClass = index;
            this.iframesrc=iframesrc;
           
         },
         getEmployeeInfo: function (){//获取柜员信息
            this.$axios
            .post('/bk-employee/getEmployeeInfo',
                  {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
            )
            .then(result => {
                  if(result.data.code==200){
                     this.tellerName=result.data.data[0];
                  }else{
                     this.tellerName='';
                  }
            })
            .catch(failResponse => {})
         }
      }
   }
  </script>
  <style>
      a:hover{
         text-decoration: none;
         cursor: pointer;
      }
      .dd1:hover{
         background:lightblue;
      }
      .iframeMain{
         position: absolute;
         width: 95%;
         height: 85%;
         top: 12%;
         left: 30px;
         border: 1px solid #f5f5f5;
         border-radius:5px;
         margin-right: 132px;
      }
      .a_active {
         background:#f5f5f5;
         color: black !important;
      }
      .layui-nav-item1{
         line-height: 45px !important;
      }

      .sidebar {
        background-color: #f5f5f5;
        position: fixed;
        left: 0px;
        bottom: 0px;
        top: 51px;
        padding: 20px 0 0 0;
      }
      .nav-sidebar>.active>a, .nav-sidebar>.active>a:hover, .nav-sidebar>.active>a:focus {
        color: #fff;
        background-color: #428bca;
      }
  </style>
  

